<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-row>
            <el-form :inline="true" :model="formvo" class="demo-form-inline">
              <el-form-item label="小区：" style="color: #00afff;font-weight: 800">
                <el-select v-model="formvo.buildingId" placeholder="请选择小区" class="custom-select">
                  <el-option v-for="item in buildingData" :label="item.buildingName" :value="item.buildingId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formvo.status" placeholder="请选择" class="custom-select">
                  <el-option label="已入住" value="1"></el-option>
                  <el-option label="未入住" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼栋">
                <el-select v-model="formvo.blockNumber" placeholder="请选择" class="custom-select">
                  <el-option v-for="item in buildingList" :label="item.blockNumber" :value="item.blockNumber"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单元">
                <el-select v-model="formvo.unitNumber" placeholder="请选择" class="custom-select">
                  <el-option v-for="item in unitList" :label="item.unitNumber" :value="item.unitNumber"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼层">
                <el-select v-model="formvo.floorNumber" placeholder="请选择" class="custom-select">
                  <el-option v-for="item in floorList" :label="item.floorNumber" :value="item.floorNumber"></el-option>                </el-select>
              </el-form-item>
              <el-form-item label="房号">
                <el-select v-model="formvo.roomNumber" placeholder="请选择" class="custom-select">
                  <el-option v-for="item in roomList" :label="item.roomNumber" :value="item.roomNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-row>
          <!-- 按钮 -->
          <el-row>
            <el-button style="margin-right: 10px;" @click="pageList">查询</el-button>
            <el-button type="primary" style="margin-right: 10px;" @click="formvo={buildingId:1}">一键重置</el-button>
            <el-button type="success" style="margin-right: 10px;" @click="toSave">新增</el-button>

            <el-upload action="http://localhost:5959/p-account/account/importExcel" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" name="file"
              style="display: inline-block; margin-right: 10px;">
              <el-button type="primary">
                导入
              </el-button>
            </el-upload>

            <el-button type="info" style="margin-right: 10px;" @click="exportExcel">导出</el-button>
            <el-button type="warning" style="margin-right: 10px;" @click="toRoomPei">房屋配置</el-button>
            <el-button type="danger" @click="toDeleteAll">批量删除</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- boody -->
    <el-row :gutter="20">
      <!-- 左边 -->
      <el-col :span="4" v-if="flag1">
        <div class="grid-content bg-purple div-left">
          <div class="therr-row">
            <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                :default-expanded-keys="expandedKeys"
                :default-checked-keys="checkedKeys">
            </el-tree>
          </div>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :span="20" v-if="flag2">
        <div class="grid-content bg-purple div-left">
          <div class="container">
            <el-row :gutter="20" style="margin-left: 100px">
              <!-- 位置 -->
              <el-col :span="4">
                <div class="round-rectangle">
                  <div class="aa" style="background-color: #1475f9">
                    <svg t="1724394387187" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="13703" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M861.49 63.87c24.74 0 44.82 20.08 44.82 44.82v806.72c0 24.74-20.08 44.82-44.82 44.82H234.04c-24.74 0-44.82-20.08-44.82-44.82v-89.64H99.59v-89.64h89.64V646.5H99.59v-89.64h89.64v-89.64H99.59v-89.64h89.64v-89.64H99.59V198.3h89.64v-89.64c0-24.74 20.08-44.82 44.82-44.82h627.44v0.03z"
                        fill="#ffffff" p-id="13704" data-spm-anchor-id="a313x.search_index.0.i4.291a3a81oj1aZv"
                        class="selected"></path>
                      <path
                        d="M592.59 332.77h-89.64v134.46H368.5v89.63h134.41l0.04 134.46h89.64l-0.05-134.46h134.5v-89.63H592.59z"
                        fill="#1296db" p-id="13705" data-spm-anchor-id="a313x.search_index.0.i1.291a3a81oj1aZv"
                        class="selected"></path>
                    </svg>
                  </div>
                  <div class="bb">
                    <div class="cc">
                      <span style="font-size: 18px; font-weight: 1000">{{countData.address}}</span>
                      <svg t="1724398040325" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15125" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="25" height="25">
                        <path
                          d="M423.731142 161.571862 423.731142 249.306043 713.416847 249.306043 160.428318 802.295596 221.877855 863.682711 774.803963 310.790372 774.803963 600.443331 862.637404 600.443331 862.637404 161.571862Z"
                          p-id="15126" fill=" #1475f9"></path>
                      </svg>
                    </div>
                    <div class="dd">楼层位置</div>
                  </div>
                </div>
              </el-col>
              <!-- 总户数 -->
              <el-col :span="4">
                <div class="round-rectangle">
                  <div class="aa" style="background-color: #ed7780">
                    <svg t="1724400197135" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="16456" width="35" height="35">
                      <path
                        d="M245 112v72h-61v200c0 78.734 63.188 142.71 141.619 143.98L328 528c78.734 0 142.71-63.188 143.98-141.619L472 384V184h-61v-72h101c17.673 0 32 14.327 32 32v240c0 107.027-77.841 195.873-179.998 213.013L364 666c0 107.143 86.857 194 194 194 106.072 0 192.26-85.128 193.974-190.792L752 666v-72.969c-55.404-15.67-96-66.61-96-127.031 0-72.902 59.098-132 132-132s132 59.098 132 132c0 60.42-40.595 111.36-95.999 127.03L824 666c0 146.908-119.092 266-266 266-145.439 0-263.615-116.722-265.964-261.601L292 666l-0.001-68.987C189.842 579.874 112 491.027 112 384V144c0-17.673 14.327-32 32-32h101z m543 294c-33.137 0-60 26.863-60 60s26.863 60 60 60 60-26.863 60-60-26.863-60-60-60z"
                        p-id="16457" fill="#ffffff"></path>
                    </svg>
                  </div>
                  <div class="bb">
                    <div class="cc">
                      <span style="font-size: 18px; font-weight: 1000">{{countData.ru+countData.wei}}</span>
                      <svg t="1724398040325" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15125" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="25" height="25">
                        <path
                          d="M423.731142 161.571862 423.731142 249.306043 713.416847 249.306043 160.428318 802.295596 221.877855 863.682711 774.803963 310.790372 774.803963 600.443331 862.637404 600.443331 862.637404 161.571862Z"
                          p-id="15126" fill=" #1475f9"></path>
                      </svg>
                    </div>
                    <div class="dd">总户数量</div>
                  </div>
                </div>
              </el-col>
              <!-- 已入住 -->
              <el-col :span="4">
                <div class="round-rectangle">
                  <div class="aa" style="background-color: #dff9fb">
                    <svg t="1724400395026" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="19133" width="35" height="35">
                      <path
                        d="M511.996414 0.12689c-282.285155 0-511.975441 229.640144-511.975441 511.930415 0 282.303574 229.690286 511.941672 511.975441 511.941672 282.286178 0 511.982604-229.639121 511.982604-511.941672C1023.979018 229.767034 794.282592 0.12689 511.996414 0.12689L511.996414 0.12689zM511.996414 941.02624c-236.533135 0-428.955632-192.439894-428.955632-428.962795S275.46328 83.123162 511.996414 83.123162c236.540298 0 428.962795 192.416358 428.962795 428.940282S748.536712 941.02624 511.996414 941.02624L511.996414 941.02624zM655.047458 231.262084l-91.330078 168.284751c-24.376177 45.590338-39.235606 75.92318-44.698015 90.940199l-1.571798 0C501.393939 453.957049 456.064544 367.574656 381.441986 231.262084l-85.909625 0 159.747307 274.381138L324.305685 505.643222l0 60.657498 153.526629 0 0 83.552951-153.526629 0 0 61.376882 153.526629 0 0 121.68134 76.17389 0L554.006204 711.224414l148.099013 0 0-61.374836L554.00518 649.849578l0-83.548858 148.099013 0 0-60.657498L575.007517 505.643222l161.296593-274.381138L655.047458 231.262084 655.047458 231.262084zM655.047458 231.262084"
                        fill="#1afa29" p-id="19134"></path>
                    </svg>
                  </div>
                  <div class="bb">
                    <div class="cc">
                      <span style="font-size: 18px; font-weight: 1000">{{countData.ru}}</span>
                      <svg t="1724398040325" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15125" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="25" height="25">
                        <path
                          d="M423.731142 161.571862 423.731142 249.306043 713.416847 249.306043 160.428318 802.295596 221.877855 863.682711 774.803963 310.790372 774.803963 600.443331 862.637404 600.443331 862.637404 161.571862Z"
                          p-id="15126" fill=" #1475f9"></path>
                      </svg>
                    </div>
                    <div class="dd">已入住户</div>
                  </div>
                </div>
              </el-col>
              <!-- 未入住 -->
              <el-col :span="4">
                <div class="round-rectangle">
                  <div class="aa" style="background-color: #fd9641">
                    <svg t="1724400967590" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="20959" width="35" height="35">
                      <path
                        d="M931.84 938.496H94.72c-14.336 0-26.112-11.776-26.112-26.112V125.44c0-14.336 11.776-26.112 26.112-26.112s26.112 11.776 26.112 26.112V885.76H931.84c14.336 0 26.112 11.776 26.112 26.624 0 14.336-11.776 26.112-26.112 26.112z"
                        fill="#ffffff" p-id="20960"></path>
                      <path
                        d="M224.256 784.384c-14.336 0-26.112-11.776-26.112-26.112 0-5.632 2.048-11.264 5.12-15.872l185.344-250.368c20.48-24.064 53.248-27.136 76.288-8.704l155.136 113.152 237.568-312.832c8.704-11.776 25.088-13.824 36.864-5.12 11.776 8.704 13.824 25.088 5.12 36.864l-245.76 323.584c-13.312 16.896-37.888 19.968-55.296 6.656l-165.376-120.832L245.76 773.12c-5.12 7.168-13.312 11.264-21.504 11.264z"
                        fill="#ffffff" p-id="20961"></path>
                    </svg>
                  </div>
                  <div class="bb">
                    <div class="cc">
                      <span style="font-size: 18px; font-weight: 1000">{{countData.wei}}</span>
                      <svg t="1724398040325" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15125" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="25" height="25">
                        <path
                          d="M423.731142 161.571862 423.731142 249.306043 713.416847 249.306043 160.428318 802.295596 221.877855 863.682711 774.803963 310.790372 774.803963 600.443331 862.637404 600.443331 862.637404 161.571862Z"
                          p-id="15126" fill=" #1475f9"></path>
                      </svg>
                    </div>
                    <div class="dd">未入户数</div>
                  </div>
                </div>
              </el-col>
              <!-- 入住人数 -->
              <el-col :span="4">
                <div class="round-rectangle">
                  <div class="aa" style="background-color: #8a0eff">
                    <svg t="1724401372367" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="47598" width="35" height="35">
                      <path
                        d="M689.11 121.72c-70.21 0-133.67 28.85-179.2 75.32-45.53-46.48-108.99-75.32-179.2-75.32-138.56 0-250.89 112.32-250.89 250.87 0 286.73 430.08 537.6 430.08 537.6S940 659.33 940 372.6c0-138.55-112.32-250.88-250.89-250.88z"
                        fill="#ffffff" p-id="47599"></path>
                      <path
                        d="M689.11 121.72c-12.17 0-24.12 0.88-35.83 2.56 121.58 17.39 215.04 121.93 215.04 248.31 0 235.84-290.97 447.42-394.25 515.1 22.29 14.61 35.84 22.51 35.84 22.51S940 659.33 940 372.6c0-138.55-112.32-250.88-250.89-250.88z"
                        fill="#ffffff" opacity=".2" p-id="47600"></path>
                    </svg>
                  </div>
                  <div class="bb">
                    <div class="cc">
                      <span style="font-size: 18px; font-weight: 1000">{{countData.userCount}}</span>
                      <svg t="1724398040325" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15125" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="25" height="25">
                        <path
                          d="M423.731142 161.571862 423.731142 249.306043 713.416847 249.306043 160.428318 802.295596 221.877855 863.682711 774.803963 310.790372 774.803963 600.443331 862.637404 600.443331 862.637404 161.571862Z"
                          p-id="15126" fill=" #1475f9"></path>
                      </svg>
                    </div>
                    <div class="dd">入住人数</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 表 -->
          <div>
            <template>
              <el-table :data="tableData" style="width: 100%;margin-left: 20px;"
                        @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column fixed prop="id" label="序号">
                </el-table-column>
                <el-table-column prop="blockNumber" label="楼栋">
                </el-table-column>
                <el-table-column prop="unitNumber" label="单元">
                </el-table-column>
                <el-table-column prop="floorNumber" label="楼层">
                </el-table-column>
                <el-table-column prop="roomNumber" label="房屋">
                </el-table-column>
                <el-table-column prop="area" label="面积">
                </el-table-column>
                <el-table-column prop="name" label="户主">
                </el-table-column>
                <el-table-column prop="phoneNumber" label="手机号">
                </el-table-column>
                <el-table-column  label="状态">
                  <template slot-scope="scope">
                    {{scope.row.roomStatus===1?'已入住':'未入住'}}
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="400">
                  <template slot-scope="scope">
                    <el-button @click="toUpdate(scope.row)" type="text" size="small">编辑
                    </el-button>
                    <el-button type="text" size="small" @click="toLooke">查看用户</el-button>
                    <el-button type="text" size="small" @click="toView">详情</el-button>
                    <el-button type="text" size="small" @click="toDeleteOne">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </el-col>
      <!--      房屋配置-->
      <!-- 左边 -->
      <el-col :span="4" v-if="flag1 ? false : true">
        <div class="grid-content bg-purple div-left">
          <ol class="ol-one">
            <li @click="activeStep1 = 1">楼栋信息初始化</li>
            <li @click="activeStep1 = 2">设置单元数</li>
            <li @click="activeStep1 = 3">设置层数及户数</li>
            <li @click="activeStep1 = 4">设置面积数</li>
          </ol>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :span="20" v-if="flag2 ? false : true">
        <div class="grid-content bg-purple div-left">
          <!-- 页面1 -->
          <el-form :inline="true" :model="v1" class="demo-form-inline">
            <div class="one" v-if="activeStep1 === 1">
              <p style="font-size: 20px">楼道信息初始化</p>
              <p style="font-size: 15px">
                门牌号累加说明：比如每层3户，第一层的门牌号分别为1、2、3号，第二层的门牌号为4、5、6号，如果每一层楼的门牌号都是从1号开始则不用勾选
              </p>
              <p style="font-size: 15px">
                小区初次接入后，可进行楼栋初始化，通过定义小区各楼栋的单元数、层数、户数，快速完成楼栋信息配置。
              </p>
              <el-checkbox v-model="checked">门牌号累加（不勾选则为门牌号重复）</el-checkbox>
              <div class="outer-box">
                <div v-for="(row, index) in rows" :key="index" class="row">
                  <el-row style="margin-bottom: 20px">
                    <span style="line-height: 30px; width: 80px">{{
                      row.id
                      }}</span>
                    <span style="line-height: 30px"><span style="color: red">*</span>起始楼栋数</span><input type="number"
                      v-model="row.startBuilding" class="building-input" />
                    <span style="line-height: 30px"><span style="color: red">*</span>结束楼栋数</span><input type="number"
                      v-model="row.endBuilding" class="building-input" />
                    <el-button @click="addRow" v-if="index === 0" >
                      +
                    </el-button>
                    <el-button @click="removeRow(index)" v-else type="danger">
                      -
                    </el-button>
                  </el-row>
                </div>
              </div>

            </div>
          </el-form>
          <!-- 页面2 -->
          <el-form :inline="true" :model="v1" class="demo-form-inline">
            <div class="one" v-if="activeStep1 === 2">
              <!-- <h1>2、设置单元数</h1> -->
              <p>设置单元数</p>
              <el-row>
                <el-table :data="loufang" border style="width: 1000px;margin-right: 120px;">
                  <el-table-column prop="date" label="日期" fixed>
                    <template slot="header">
                      <div class="header-buttons" style="width: 120px; margin: auto;">
                        <span class="span1" style="color: #4AB7BD" @click="showFirstInput = true">栋数</span>
                        <span class="span1" style="color: #00afff" @click="showFirstInput = false">设置别名</span>
                      </div>
                    </template>
                    <template slot-scope="scope">
                      <el-input v-if="showFirstInput" @focus="onFocus(scope.$index, 'first')"
                        ref="firstInput"></el-input>
                      <el-input placeholder="请输入" v-else @focus="onFocus(scope.$index, 'second')"
                        ref="secondInput"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="单元数">
                    <el-input placeholder="请输入"></el-input>
                  </el-table-column>
                  <el-table-column prop="address" label="起始单元">
                    <el-input placeholder="请输入"></el-input>
                  </el-table-column>
                  <el-table-column prop="address" label="经度">
                    <el-input placeholder="地图点选" disabled></el-input>
                  </el-table-column>
                  <el-table-column prop="address" label="纬度">
                    <el-input placeholder="地图点选" disabled></el-input>
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <el-button type="text" style="color: red;">删除</el-button>
                    <el-button type="text">地图经纬度</el-button>
                  </el-table-column>
                </el-table>
              </el-row>

            </div>
          </el-form>
          <!-- 页面3 -->
          <el-form :inline="true" :model="v1" class="demo-form-inline">
            <div class="one" v-if="activeStep1 === 3">
              <!-- <h1>3、设置层数及户数</h1> -->
              <p>设置层数及户数</p>
              <el-row>
                <span class="y3xh">1</span>
                <el-table :data="tableData2" border style="width: 1000px;margin-right: 120px;">
                  <el-table-column prop="date" label="楼栋">
                    <el-input disabled></el-input>
                  </el-table-column>
                  <el-table-column prop="name" label="单元号">
                    <el-input disabled></el-input>
                  </el-table-column>
                  <el-table-column prop="address" label="起始楼层">
                    <el-input placeholder="请输入"></el-input>
                  </el-table-column>
                  <el-table-column prop="address" label="最高楼层">
                    <el-input placeholder="请输入"></el-input>
                  </el-table-column>
                  <el-table-column prop="address" label="每层户数">
                    <el-input placeholder="请输入"></el-input>
                  </el-table-column>
                  <el-table-column fixed="right">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="fillRow(scope.$index)">填充上一行</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </div>
          </el-form>
          <!-- 页面4 -->
          <el-form :inline="true" :model="v1" class="demo-form-inline">
            <div class="one" v-if="activeStep1 === 4">
              <!-- <h1>4、设置面积数</h1> -->
              <span>设置面积数</span><br><br>
              <el-row>
                <el-table :data="tableData3" border style="width: 100%;margin-right: 120px;">
                  <el-table-column prop="date" label="栋数">
                  </el-table-column>
                  <el-table-column prop="name" label="单元号">
                  </el-table-column>
                  <el-table-column prop="address" label="户型">
                  </el-table-column>
                  <el-table-column prop="address" label="面积(m²)" style="height: 40px;">
                    <template slot="header">
                      <span class="column-label">面积(m²)</span>
                      <el-input placeholder="请输入" v-model="searchArea"></el-input>
                      <el-button type="text" size="mini" style="float:right;" @click="searchByArea">面积填充</el-button>
                    </template>
                    <template>
                      <el-input placeholder="请输入"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </div>
          </el-form>
          <div style="position: absolute;margin-top: 30px;top: 80%;left: 40%;text-align: center;">
            <el-button @click="prevStep">返回</el-button>
            <el-button type="primary" @click="activeStep">保存</el-button>
          </div>

        </div>
      </el-col>
    </el-row>

    <!-- 新增和编辑弹出 -->
    <el-dialog title="收货地址" :visible.sync="dialogSave">
      <el-form :model="formData" :rules="rules" ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="4" class="parent-container">
            <h3 class="underline-3px">基础信息</h3>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="楼栋" prop="building">
              <el-input v-model="formData.building" placeholder="请输入楼栋"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单元" prop="unit">
              <el-input v-model="formData.unit" placeholder="请输入单元"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="楼层" prop="floor">
              <el-input v-model.number="formData.floor" placeholder="请输入楼层"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房间号" prop="room">
              <el-input v-model="formData.room" placeholder="请输入房间"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="面积" prop="area">
              <el-input v-model.number="formData.area" placeholder="请输入面积"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纬度">
              <el-input v-model.number="formData.latitude" placeholder="请输入经纬度" style="width: 150px;"></el-input>
              <el-button class="el-icon-map-location" style="margin-left: 50px;font-size: 20px;"
                @click="toSaveMap"></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" class="parent-container">
            <h3 class="underline-3px">宽带信息</h3>
          </el-col>
        </el-row>
        <el-row :gutter="26">
          <el-col :span="12">
            <el-form-item label="宽带运营商" label-width="40">
              <el-select v-model="formData.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期时间">
              <el-input v-model.number="formData.latitude" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 地图 -->
    <el-dialog title="地图" :visible.sync="dialogMap" id="index_container">
      <div id="map_wrap">
        <MapContainer />
      </div>
    </el-dialog>
    <!--详情-->
    <el-dialog title="详情" :visible.sync="dialogView">
      <div style="text-align: left;">
        <span>基本信息</span>
        <hr>
        <el-descriptions class="margin-top" :column="3" :size="size" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              楼栋
            </template>
            1
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              单元
            </template>
            1
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              楼层
            </template>
            1
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              房间号
            </template>
            101
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              面积
            </template>
            106.98
          </el-descriptions-item>
        </el-descriptions>

        <span>住户信息</span>
        <hr>
        <el-table :data="gridData">
          <el-table-column property="id" label="ID" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" style="color: red">
            <template slot-scope="scope">
              <a href="https://www.jd.com/">{{ scope.row.name }}</a>
            </template>
          </el-table-column>
          <el-table-column property="sex" label="性别"></el-table-column>
          <el-table-column property="phone" label="手机号"></el-table-column>
          <el-table-column property="joindate" label="入住时间"></el-table-column>
          <el-table-column property="shi" label="是否户主"></el-table-column>
          <el-table-column property="relation" label="与户主关系"></el-table-column>
        </el-table>

        <span style="text-align: left; width: 100%;display: block;">关系拓扑图</span>
        <hr>
        <img src="null" alt="加载失败！" width="50px">
      </div>

    </el-dialog>
    <!--查看-->
    <el-dialog title="查看住户" :visible.sync="dialogLook">
      <div style="text-align: left;">
        <span :style="{ color: look === 'xz' ? '#00afff' : '' }" @click="look = 'xz'" class="span1">户主信息</span>
        <span :style="{ color: look === 'li' ? '#00afff' : '' }" @click="look = 'li'" class="span1">家庭信息</span>
        <br><br>

        <!--        现在住户-->
        <el-table :data="gidLook" v-if="look == 'xz'">
          <el-table-column property="id" label="序号" width="150"></el-table-column>
          <el-table-column label="姓名" style="color: red">
            <template slot-scope="scope">
              <a href="https://www.jd.com/">{{ scope.row.name }}</a>
            </template>
          </el-table-column>
          <el-table-column label="照片">
            <template slot-scope="scope">
              <img :src="scope.row.pic" alt="jiazai">
            </template>
          </el-table-column>
          <el-table-column property="phone" label="手机号"></el-table-column>
          <el-table-column property="joindate" label="入住时间"></el-table-column>
          <el-table-column label="是否户主">
            <template slot-scope="scope">
              <el-select v-model="scope.row.shi" placeholder="选择关系">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column property="relation" label="与户主关系">
            <template slot-scope="scope">
              <el-select v-model="scope.row.gx" placeholder="选择关系">
                <el-option label="夫妻" value="夫妻"></el-option>
                <el-option label="父亲" value="父亲"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="toJb" type="text" size="small">解绑</el-button>

            </template>
          </el-table-column>
        </el-table>
        <!--        历史住户-->
        <el-table :data="gidLookLs" v-if="look == 'li'">
          <el-table-column property="id" label="序号" width="150"></el-table-column>
          <el-table-column label="姓名" style="color: red">
            <template slot-scope="scope">
              <a href="https://www.jd.com/">{{ scope.row.name }}</a>
            </template>
          </el-table-column>
          <el-table-column label="照片">
            <template slot-scope="scope">
              <img :src="scope.row.pic" alt="jiazai">
            </template>
          </el-table-column>
          <el-table-column property="sex" label="性别"></el-table-column>
          <el-table-column property="joindate" label="入住日期"></el-table-column>
          <el-table-column property="joindate" label="删除日期"></el-table-column>
          <el-table-column property="name" label="删除人"></el-table-column>
        </el-table>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import MapContainer from "./MapContainer.vue";
import {
  getBroadbandAll,
  getUnitAll,
  getFloorAll,
  getRoomAll,
  getBuildingBlockNumber,
  getCount, pageList,
  getBuilding,
  getThree,
} from '@/api/room/room'
import './room.css'

export default {
  components: {
    MapContainer
  },
  data() {
    return {
      expandedKeys:[],
      checkedKeys:[],
      treeData:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //的动态下拉
      buildingList:[],
      buildingData:[],
      floorList:[],
      unitList:[],
      roomList:[],
      broadbandList:[],
      countData:{},
      //分页
      handleSelectionData:[],
      formvo: {buildingId:1},
      pageNum:1,
      pageSize:2,
      total:0,
      //房屋配置
      v1: {},
      activeStep1: 1,
      //页面四数据
      tableData3: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      //页面三数据
      tableData2: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      //页面二数据
      loufang: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      // 第一个页面的数据
      rows: [{ id: "1", startBuilding: "", endBuilding: "" }],
      //页面二设置别名按钮切换输入框
      showFirstInput: true,
      // ---------------------
      flag1: true,
      flag2: true,
      color01: '',
      color02: '',
      gidLookLs: [
        { id: 1, name: 'lisi', pic: 'null', sex: '男', joindate: '2023-02-02', date: '2023-02-02', tname: 'lisi' },
        { id: 1, name: 'lisi', pic: 'null', sex: '男', joindate: '2023-02-02', date: '2023-02-02', tname: 'lisi' },
        { id: 1, name: 'lisi', pic: 'null', sex: '男', joindate: '2023-02-02', date: '2023-02-02', tname: 'lisi' },
        { id: 1, name: 'lisi', pic: 'null', sex: '男', joindate: '2023-02-02', date: '2023-02-02', tname: 'lisi' },
      ],
      gidLook: [
        { id: 1, name: 'lisi', pic: 'null', phone: '男', joindate: '2023-02-02', shi: '是', gx: '夫妻' },
        { id: 1, name: 'lisi', pic: 'null', phone: '男', joindate: '2023-02-02', shi: '否', gx: '情侣' },
        { id: 1, name: 'lisi', pic: 'null', phone: '男', joindate: '2023-02-02', shi: '是', gx: '夫妻' },
      ],
      look: 'xz',
      dialogLook: false,
      dialogView: false,
      form: {},
      gridData: [
        {
          id: 1,
          name: '张三',
          sex: '男',
          age: '18',
          phone: '12345678901',
          joindate: "2020-10-10",
          relation: '父子',
          shi: '是'
        },
        {
          id: 2,
          name: '李四',
          sex: '女',
          age: '18',
          phone: '12345678901',
          joindate: "2020-10-10",
          relation: '父子',
          shi: '否'
        }

      ],

      //首页分页数据
      tableData: [],
      dialogMap: false,
      dialogSave: false,

      formData: {
        building: '',
        unit: '',
        floor: null,
        room: '',
        area: null,
        latitude: null,
        longitude: null
      },


    }

  },

  methods: {
    //树形结构
    getTree(){
      getThree(this.formvo.buildingId).then(res=>{
        this.treeData=res.data.li;
        this.expandedKeys=res.data.expandedKeys;
          this.checkedKeys=res.data.checkedKeys
      })
    },
    //分页
    pageList(){
      const  that = this;
      pageList(this.pageNum,this.pageSize,this.formvo).then(res=>{
        this.tableData=res.data.records;
        this.total=res.data.total;
          if (that.pageSize>res.data.pages){
            that.pageNum=res.data.pages;
          }
          this.getCount();
      })
    },
    //动态下拉菜单
    getSelectAll(){
      getBuildingBlockNumber().then(res=>{
        console.log(res)
        this.buildingList=res.data;
        });
      getUnitAll().then(res=>{
        this.unitList=res.data;
      });
      getFloorAll().then(res=>{
        this.floorList=res.data;
      });
      getRoomAll().then(res=>{
        this.roomList=res.data;
      });
      getBroadbandAll().then(res=>{
        this.broadbandList=res.data;
      });
      getBuilding().then(res=>{
        this.buildingData=res.data;
      })
    },
    //统计数据
    getCount(){
      getCount(this.formvo.buildingId).then(res=>{
        this.countData=res.data;
      })
    },
    //分页
    handleSizeChange(val){
      this.pageSize=val;
      this.pageList();
    },
    handleCurrentChange(val){
      this.pageNum=val;
      this.pageList();
    },
    handleSelectionChange(val) {
      this.handleSelectionData = val;
    },
    //----------------------------------------------
    //房屋配置
    //第一个页面加号减号
    addRow() {
      const newRow = {
        id: this.rows.length + 1,
        startBuilding: "",
        endBuilding: "",
      };
      this.rows.push(newRow);
    },
    removeRow(index) {
      this.rows.splice(index, 1);
    },
    prevStep() {
      this.flag1 = true;
      this.flag2 = true
      this.activeStep1 = 1
    },
    activeStep() {
      this.$message.success('保存成功！')
    },
    // ----------------
    toRoomPei() {
      this.flag1 = false;
      this.flag2 = false;
    },
    //去解绑
    toJb() {
      this.$message.success("解绑！！");
    },
    //查看住户
    toLooke() {
      this.dialogLook = true;
    },
    //导出
    exportExcel() {
      this.$message.success("导出！！！");
    },
    //单删
    toDeleteOne() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //批量删除
    toDeleteAll() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    toUpdate() {
      this.dialogSave = true;
    },
    toView() {
      this.dialogView = true;
    },
    handleNodeClickTherr(data) {
      console.log(data);
    },
    toSaveMap() {
      this.dialogMap = true
    },
    //弹出提交
    toSave() {
      this.formData = {}
      this.dialogSave = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
          console.log('Form data:', this.formData);
          // 这里可以添加提交表单的逻辑
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 文件上传
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  },


  //在实例化之后
  created() {
    //动态下拉的方法
    this.getSelectAll();
    this.getCount();
    this.pageList();
    this.getTree();
  },

}
</script>
